<template>
  <div class="resume-review">
    <el-card>
      <template #header>
        <div class="card-header">
          <h2>{{ pageTitle }}</h2>
          <div class="header-actions">
            <el-button @click="fetchResumeList">
              <el-icon><Refresh /></el-icon>
              刷新
            </el-button>
          </div>
        </div>
      </template>

      <!-- 统计信息 -->
      <div class="statistics-section">
        <el-row :gutter="20">
          <el-col :span="6">
            <el-statistic title="待审核" :value="statistics.pending" />
          </el-col>
          <el-col :span="6">
            <el-statistic title="已通过" :value="statistics.approved" />
          </el-col>
          <el-col :span="6">
            <el-statistic title="需修改" :value="statistics.rejected" />
          </el-col>
          <el-col :span="6">
            <el-statistic title="总计" :value="statistics.total" />
          </el-col>
        </el-row>
      </div>

      <!-- 当前查看学生提示 -->
      <div v-if="route.query.student_name" class="student-info-section">
        <el-alert
          :title="`正在查看学生：${route.query.student_name} 的简历信息`"
          type="info"
          :closable="false"
          show-icon
        />
      </div>

      <!-- 筛选条件 -->
      <div class="filter-section">
        <el-form :model="filterForm" inline>
          <el-form-item label="审核状态">
            <el-select v-model="filterForm.status" placeholder="请选择状态" clearable>
              <el-option label="待审核" value="pending_review" />
              <el-option label="已通过" value="approved" />
              <el-option label="未通过" value="rejected" />
              <el-option label="待修改" value="needs_revision" />
            </el-select>
          </el-form-item>
          <el-form-item label="学生姓名">
            <el-input v-model="filterForm.student_name" placeholder="请输入学生姓名" clearable />
          </el-form-item>
          <el-form-item label="简历类型">
            <el-select v-model="filterForm.resume_type" placeholder="请选择类型" clearable>
              <el-option label="上传简历" value="uploaded" />
              <el-option label="在线生成" value="generated" />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="handleSearch">
              <el-icon><Search /></el-icon>
              搜索
            </el-button>
            <el-button @click="resetFilter">重置</el-button>
          </el-form-item>
        </el-form>
      </div>

      <!-- 简历列表 -->
      <div class="table-section">
        <el-table 
          :data="resumeList" 
          v-loading="loading"
          stripe
          border
        >
          <el-table-column prop="student_name" label="学生姓名" width="100" />
          <el-table-column prop="title" label="简历标题" width="200" />
          <el-table-column prop="resume_type" label="类型" width="100">
            <template #default="{ row }">
              <el-tag :type="row.resume_type === 'uploaded' ? 'success' : 'primary'">
                {{ row.resume_type === 'uploaded' ? '上传简历' : '在线生成' }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="status" label="状态" width="100">
            <template #default="{ row }">
              <el-tag :type="getStatusType(row.status)">
                {{ getStatusText(row.status) }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="completion_rate" label="完成度" width="100">
            <template #default="{ row }">
              <el-progress 
                :percentage="parseFloat(row.completion_rate || 0)" 
                :stroke-width="8"
                :show-text="false"
              />
              <span style="margin-left: 8px;">{{ row.completion_rate }}%</span>
            </template>
          </el-table-column>
          <el-table-column prop="updated_at" label="更新时间" width="160">
            <template #default="{ row }">
              {{ formatTime(row.updated_at) }}
            </template>
          </el-table-column>
          <el-table-column prop="review_date" label="审核时间" width="160">
            <template #default="{ row }">
              {{ row.review_date ? formatTime(row.review_date) : '-' }}
            </template>
          </el-table-column>
          <el-table-column label="操作" width="200" fixed="right">
            <template #default="{ row }">
              <!-- 移除重复的预览按钮，使用下面的"预览简历"按钮 -->
              <el-button
                v-if="row.status === 'pending_review'"
                type="success"
                size="small"
                @click="handleReview(row)"
              >
                <el-icon><Check /></el-icon>
                审核
              </el-button>
              <el-button
                v-if="['approved', 'rejected', 'needs_revision'].includes(row.status)"
                type="info"
                size="small"
                @click="handleViewReview(row)"
              >
                <el-icon><Document /></el-icon>
                查看审核
              </el-button>
              <el-button
                type="primary"
                size="small"
                @click="handleViewResume(row)"
                plain
              >
                <el-icon><View /></el-icon>
                预览简历
              </el-button>
              <el-button
                type="warning"
                size="small"
                @click="handleViewHistory(row)"
                plain
              >
                <el-icon><Clock /></el-icon>
                查看历史
              </el-button>
            </template>
          </el-table-column>
        </el-table>

        <!-- 分页 -->
        <div class="pagination-wrapper">
          <el-pagination
            v-model:current-page="pagination.page"
            v-model:page-size="pagination.pageSize"
            :page-sizes="[10, 20, 50]"
            :total="pagination.total"
            layout="total, sizes, prev, pager, next, jumper"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </div>
      </div>
    </el-card>

    <!-- 移除重复的预览组件，使用下面的dialog包装版本 -->

    <!-- 审核对话框 -->
    <el-dialog
      v-model="showReviewDialog"
      title="审核简历"
      width="600px"
    >
      <div class="review-content">
        <div class="resume-info">
          <h3>简历信息</h3>
          <el-descriptions :column="2" border>
            <el-descriptions-item label="学生姓名">
              {{ currentResume?.student_name }}
            </el-descriptions-item>
            <el-descriptions-item label="简历标题">
              {{ currentResume?.title }}
            </el-descriptions-item>
            <el-descriptions-item label="简历类型">
              {{ currentResume?.resume_type === 'uploaded' ? '上传简历' : '在线生成' }}
            </el-descriptions-item>
            <el-descriptions-item label="完成度">
              {{ currentResume?.completion_rate }}%
            </el-descriptions-item>
          </el-descriptions>
        </div>

        <el-form :model="reviewForm" label-width="100px" style="margin-top: 20px;">
          <el-form-item label="审核结果" required>
            <el-radio-group v-model="reviewForm.result">
              <el-radio value="approved">通过</el-radio>
              <el-radio value="rejected">未通过</el-radio>
              <el-radio value="needs_revision">待修改</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="审核意见">
            <el-input
              v-model="reviewForm.comments"
              type="textarea"
              :rows="4"
              placeholder="请输入审核意见（选填）"
            />
          </el-form-item>
        </el-form>
      </div>
      <template #footer>
        <el-button @click="showReviewDialog = false">取消</el-button>
        <el-button type="primary" @click="confirmReview" :loading="reviewing">
          确定审核
        </el-button>
      </template>
    </el-dialog>

    <!-- 查看审核结果对话框 -->
    <el-dialog
      v-model="showViewReviewDialog"
      title="审核结果"
      width="500px"
    >
      <div class="review-result">
        <el-descriptions :column="1" border>
          <el-descriptions-item label="审核结果">
            <el-tag :type="currentResume?.status === 'approved' ? 'success' : 'warning'">
              {{ currentResume?.status === 'approved' ? '通过' : '需修改' }}
            </el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="审核人">
            {{ currentResume?.reviewer_name || '-' }}
          </el-descriptions-item>
          <el-descriptions-item label="审核时间">
            {{ currentResume?.review_date ? formatTime(currentResume.review_date) : '-' }}
          </el-descriptions-item>
          <el-descriptions-item label="审核意见">
            {{ currentResume?.review_comments || '无' }}
          </el-descriptions-item>
        </el-descriptions>
      </div>
      <template #footer>
        <el-button @click="showViewReviewDialog = false">关闭</el-button>
      </template>
    </el-dialog>

    <!-- 简历预览对话框 -->
    <EnhancedResumePreview
      v-if="currentResume"
      v-model:visible="showPreviewDialog"
      :resume-id="currentResume.id"
      :file-name="previewFileName"
      :title="previewTitle"
      @download="handlePreviewDownload"
    />
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted, computed } from 'vue'
import { useRoute } from 'vue-router'
import { ElMessage, ElMessageBox } from 'element-plus'
import {
  Search,
  Refresh,
  View,
  Check,
  Document,
  Clock
} from '@element-plus/icons-vue'
import { resumeApi, type Resume } from '@/api/resume'
import { formatTime } from '@/utils/format'
import EnhancedResumePreview from '@/components/EnhancedResumePreview.vue'

// 路由
const route = useRoute()

// 响应式数据
const loading = ref(false)
const reviewing = ref(false)
const showPreviewDialog = ref(false)
const showReviewDialog = ref(false)
const showViewReviewDialog = ref(false)

const resumeList = ref<Resume[]>([])
const currentResume = ref<Resume | null>(null)

const previewFileUrl = ref('')
const previewFileName = ref('')
const previewTitle = ref('')

const statistics = reactive({
  pending: 0,
  approved: 0,
  rejected: 0,
  total: 0
})

// 计算属性
const pageTitle = computed(() => {
  const studentName = route.query.student_name as string
  if (studentName) {
    return `${studentName} - 简历管理`
  }
  return '简历审核管理'
})

const filterForm = reactive({
  status: '',
  student_name: '',
  resume_type: ''
})

const reviewForm = reactive({
  result: 'approved',
  comments: ''
})

const pagination = reactive({
  page: 1,
  pageSize: 20,
  total: 0
})

// 方法
const fetchResumeList = async () => {
  loading.value = true
  try {
    const params = {
      page: pagination.page,
      page_size: pagination.pageSize,
      ...filterForm
    }

    // 如果有特定学生ID，添加到查询参数中
    const studentId = route.query.student_id as string
    if (studentId) {
      params.student_id = studentId
    }

    // 使用新的待审核API
    const response = await resumeApi.getPendingReviews(params)
    resumeList.value = response.data.results || []
    pagination.total = response.data.count || 0

    // 计算统计信息
    updateStatistics()
  } catch (error) {
    ElMessage.error('获取简历列表失败')
  } finally {
    loading.value = false
  }
}

const updateStatistics = () => {
  statistics.total = resumeList.value.length
  statistics.pending = resumeList.value.filter(r => r.status === 'pending_review').length
  statistics.approved = resumeList.value.filter(r => r.status === 'approved').length
  statistics.rejected = resumeList.value.filter(r => ['rejected', 'needs_revision'].includes(r.status)).length
}

const handleSearch = () => {
  pagination.page = 1
  fetchResumeList()
}

const resetFilter = () => {
  Object.assign(filterForm, {
    status: '',
    student_name: '',
    resume_type: ''
  })
  handleSearch()
}

const handleSizeChange = (size: number) => {
  pagination.pageSize = size
  pagination.page = 1
  fetchResumeList()
}

const handleCurrentChange = (page: number) => {
  pagination.page = page
  fetchResumeList()
}

// 移除重复的handlePreview函数，使用handleViewResume代替

const handleReview = (resume: Resume) => {
  currentResume.value = resume
  reviewForm.result = 'approved'
  reviewForm.comments = ''
  showReviewDialog.value = true
}

const handleViewReview = (resume: Resume) => {
  currentResume.value = resume
  showViewReviewDialog.value = true
}

// 处理预览简历
const handleViewResume = (resume: Resume) => {
  currentResume.value = resume
  previewTitle.value = `预览简历 - ${resume.title}`

  // 设置文件名用于显示
  if (resume.uploaded_file) {
    const urlParts = resume.uploaded_file.split('/')
    const fileName = urlParts[urlParts.length - 1]
    previewFileName.value = decodeURIComponent(fileName)
  } else {
    previewFileName.value = resume.generated_file_name || `${resume.title}.${resume.generated_file_type || 'docx'}`
  }

  showPreviewDialog.value = true
}

// 处理查看历史
const handleViewHistory = async (resume: Resume) => {
  try {
    const response = await resumeApi.getResumeVersions(resume.id)
    const versions = response.data.versions

    if (!versions || versions.length === 0) {
      ElMessage.info('该简历暂无历史版本')
      return
    }

    let historyContent = `简历：${resume.title}\n学生：${resume.student_name}\n\n历史版本：\n\n`

    versions.forEach((version: any, index: number) => {
      historyContent += `版本 ${version.version_number}：${version.title}\n`
      historyContent += `状态：${version.status_display}\n`
      historyContent += `提交时间：${version.submitted_at ? new Date(version.submitted_at).toLocaleString() : '未提交'}\n`

      if (version.review) {
        historyContent += `审核结果：${version.review.review_status_display}\n`
        historyContent += `审核人：${version.review.reviewer_name}\n`
        historyContent += `审核时间：${new Date(version.review.review_date).toLocaleString()}\n`
        historyContent += `审核建议：${version.review.review_comments}\n`
      }

      if (index < versions.length - 1) {
        historyContent += '\n---\n\n'
      }
    })

    await ElMessageBox.alert(
      historyContent,
      '简历历史版本',
      {
        confirmButtonText: '确定',
        type: 'info'
      }
    )
  } catch (error: any) {
    ElMessage.error('获取历史版本失败')
  }
}

const confirmReview = async () => {
  if (!reviewForm.result) {
    ElMessage.warning('请选择审核结果')
    return
  }

  reviewing.value = true
  try {
    // 设置默认审核建议
    let comments = reviewForm.comments
    if (!comments) {
      const defaultComments = {
        'approved': '简历审核通过，请准备申请模拟面试',
        'rejected': '简历严重不合格，请重新编写',
        'needs_revision': '请根据审核建议修改简历'
      }
      comments = defaultComments[reviewForm.result] || ''
    }

    await resumeApi.reviewResumeAction(currentResume.value!.id, {
      review_status: reviewForm.result,
      review_comments: comments
    })

    ElMessage.success('审核完成')
    showReviewDialog.value = false
    fetchResumeList()

    // 重置表单
    reviewForm.result = 'approved'
    reviewForm.comments = ''
  } catch (error: any) {
    ElMessage.error(error.response?.data?.error || '审核失败')
  } finally {
    reviewing.value = false
  }
}

const handlePreviewDownload = () => {
  // 处理预览下载
}

// 辅助方法
const getStatusType = (status: string) => {
  const typeMap = {
    'pending_review': 'warning',
    'under_review': 'warning',
    'approved': 'success',
    'rejected': 'danger',
    'needs_revision': 'info'
  }
  return typeMap[status] || 'info'
}

const getStatusText = (status: string) => {
  const textMap = {
    'pending_review': '待审核',
    'under_review': '审核中',
    'approved': '已通过',
    'rejected': '未通过',
    'needs_revision': '待修改'
  }
  return textMap[status] || status
}

// 生命周期
onMounted(() => {
  fetchResumeList()
})
</script>

<style lang="scss" scoped>
// 主题适配的简历审核页面样式
.resume-review {
  padding: 24px;
  background: var(--bg-color-page);
  min-height: calc(100vh - 60px);
  transition: background-color 0.3s ease;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: var(--text-color-primary);

  h2 {
    color: var(--text-color-primary);
    font-weight: 600;
    margin: 0;
    font-size: 24px;
  }
}

.header-actions {
  display: flex;
  gap: 12px;

  .el-button {
    transition: all 0.3s ease;
    border-radius: 8px;

    &:hover {
      transform: translateY(-1px);
      box-shadow: 0 4px 12px rgba(var(--color-primary-rgb), 0.3);
    }
  }
}

.statistics-section {
  margin-bottom: 24px;
  padding: 24px;
  background: var(--bg-color-overlay);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  box-shadow: var(--box-shadow-light);
  transition: all 0.3s ease;

  &:hover {
    box-shadow: var(--box-shadow);
    transform: translateY(-2px);
  }

  :deep(.el-statistic) {
    .el-statistic__content {
      color: var(--text-color-primary);
      font-weight: 600;
    }

    .el-statistic__head {
      color: var(--text-color-secondary);
      font-size: 14px;
    }
  }

  :deep(.el-row) {
    .el-col {
      text-align: center;

      &:not(:last-child) {
        border-right: 1px solid var(--border-color-light);
      }
    }
  }
}

.student-info-section {
  margin-bottom: 24px;

  :deep(.el-alert) {
    border-radius: 12px;
    border: 1px solid var(--border-color);
    background: var(--bg-color-overlay);

    .el-alert__content {
      color: var(--text-color-primary);
    }

    .el-alert__title {
      color: var(--text-color-primary);
      font-weight: 500;
    }

    .el-alert__icon {
      color: var(--color-info);
    }
  }
}

.filter-section {
  margin-bottom: 24px;
  padding: 24px;
  background: var(--bg-color);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  box-shadow: var(--box-shadow-light);
  transition: all 0.3s ease;

  &:hover {
    border-color: var(--border-color-hover);
    box-shadow: var(--box-shadow);
  }

  :deep(.el-form) {
    .el-form-item__label {
      color: var(--text-color-regular);
      font-weight: 500;
    }

    .el-input__wrapper {
      background-color: var(--bg-color-overlay);
      border-color: var(--border-color);
      border-radius: 8px;
      transition: all 0.3s ease;

      &:hover {
        border-color: var(--border-color-hover);
      }

      &.is-focus {
        border-color: var(--color-primary);
        box-shadow: 0 0 0 2px rgba(var(--color-primary-rgb), 0.2);
      }
    }

    .el-input__inner {
      color: var(--text-color-primary);
      background-color: transparent;

      &::placeholder {
        color: var(--text-color-placeholder);
      }
    }

    .el-select {
      .el-input__wrapper {
        background-color: var(--bg-color-overlay);
      }

      .el-select__caret {
        color: var(--text-color-secondary);
      }
    }

    .el-button {
      border-radius: 8px;
      transition: all 0.3s ease;

      &:hover {
        transform: translateY(-1px);
      }
    }
  }
}

.el-form-item--default :deep() .el-form-item__content{
  width: 100px;
}

.table-section {
  background: var(--bg-color);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: var(--box-shadow-light);
  border: 1px solid var(--border-color);

  :deep(.el-table) {
    background-color: var(--bg-color);
    color: var(--text-color-primary);
    border-radius: 12px;
    overflow: hidden;

    .el-table__header {
      background-color: var(--bg-color-overlay);
      width:100% !important;
      th {
        background-color: var(--bg-color-overlay);
        color: var(--text-color-primary);
        border-bottom: 1px solid var(--border-color);
        font-weight: 600;
        font-size: 14px;
        padding: 16px 12px;
      }
    }

    .el-table__body {
      width:100% !important;
      tr {
        background-color: var(--bg-color);
        transition: background-color 0.3s ease;

        &:hover {
          background-color: var(--bg-color-overlay);
        }

        td {
          border-bottom: 1px solid var(--border-color-light);
          color: var(--text-color-primary);
          padding: 16px 12px;
        }
      }
    }

    .el-table__empty-block {
      background-color: var(--bg-color);
      color: var(--text-color-secondary);
    }

    .el-button {
      border-radius: 6px;
      transition: all 0.3s ease;

      &:hover {
        transform: translateY(-1px);
      }
    }

    .el-tag {
      border-radius: 6px;
      border: 1px solid var(--border-color);
      background-color: var(--bg-color-overlay);
      color: var(--text-color-primary);
    }
  }
}

.pagination-wrapper {
  margin-top: 24px;
  text-align: right;
  padding: 16px 0;

  :deep(.el-pagination) {
    .el-pager li {
      background-color: var(--bg-color-overlay);
      color: var(--text-color-primary);
      border: 1px solid var(--border-color);
      border-radius: 6px;
      margin: 0 2px;
      transition: all 0.3s ease;

      &:hover {
        color: var(--color-primary);
        border-color: var(--color-primary);
        transform: translateY(-1px);
      }

      &.is-active {
        background-color: var(--color-primary);
        border-color: var(--color-primary);
        color: #fff;
        box-shadow: 0 4px 12px rgba(var(--color-primary-rgb), 0.3);
      }
    }

    .btn-prev,
    .btn-next {
      background-color: var(--bg-color-overlay);
      color: var(--text-color-primary);
      border: 1px solid var(--border-color);
      border-radius: 6px;
      transition: all 0.3s ease;

      &:hover {
        color: var(--color-primary);
        border-color: var(--color-primary);
        transform: translateY(-1px);
      }

      &:disabled {
        color: var(--text-color-disabled);
        border-color: var(--border-color-light);
        cursor: not-allowed;
        transform: none;
      }
    }

    .el-pagination__total,
    .el-pagination__jump {
      color: var(--text-color-secondary);
    }
  }
}

.review-content {
  max-height: 500px;
  overflow-y: auto;
  padding: 16px;
  background: var(--bg-color-overlay);
  border-radius: 8px;
  border: 1px solid var(--border-color);

  &::-webkit-scrollbar {
    width: 6px;
  }

  &::-webkit-scrollbar-track {
    background: var(--bg-color-overlay);
    border-radius: 3px;
  }

  &::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: 3px;
    transition: background-color 0.3s ease;

    &:hover {
      background: var(--border-color-hover);
    }
  }
}

.el-table--default :deep() .cell{
  padding: 0 5px !important;
}

.resume-info {
  margin-bottom: 20px;
  padding: 16px;
  background: var(--bg-color-overlay);
  border-radius: 8px;
  border: 1px solid var(--border-color);

  .info-item {
    display: flex;
    margin-bottom: 8px;

    .label {
      font-weight: 500;
      color: var(--text-color-regular);
      min-width: 80px;
    }

    .value {
      color: var(--text-color-primary);
    }
  }
}

.review-result {
  padding: 16px 0;

  .result-item {
    margin-bottom: 12px;

    .result-label {
      font-weight: 500;
      color: var(--text-color-regular);
      margin-bottom: 4px;
    }

    .result-content {
      color: var(--text-color-primary);
      line-height: 1.6;
    }
  }
}

// 对话框样式优化
:deep(.el-dialog) {
  background-color: var(--bg-color);
  border: 1px solid var(--border-color);
  box-shadow: var(--box-shadow-dark);
  border-radius: 12px;

  .el-dialog__header {
    background-color: var(--bg-color-overlay);
    border-bottom: 1px solid var(--border-color);
    border-radius: 12px 12px 0 0;

    .el-dialog__title {
      color: var(--text-color-primary);
      font-weight: 600;
    }

    .el-dialog__headerbtn {
      .el-dialog__close {
        color: var(--text-color-secondary);
        transition: color 0.3s ease;

        &:hover {
          color: var(--color-danger);
        }
      }
    }
  }

  .el-dialog__body {
    background-color: var(--bg-color);
    color: var(--text-color-primary);
  }

  .el-dialog__footer {
    background-color: var(--bg-color-overlay);
    border-top: 1px solid var(--border-color);
    border-radius: 0 0 12px 12px;
  }
}

// 响应式设计
@media (max-width: 768px) {
  .resume-review {
    padding: 16px;
  }

  .statistics-section {
    padding: 16px;
    margin-bottom: 16px;

    :deep(.el-row) {
      .el-col {
        &:not(:last-child) {
          border-right: none;
          border-bottom: 1px solid var(--border-color-light);
          padding-bottom: 12px;
          margin-bottom: 12px;
        }
      }
    }
  }

  .filter-section {
    padding: 16px;
    margin-bottom: 16px;
  }

  .header-actions {
    flex-direction: column;
    gap: 8px;

    .el-button {
      width: 100%;
    }
  }

  .pagination-wrapper {
    text-align: center;

    :deep(.el-pagination) {
      justify-content: center;
    }
  }

  .table-section {
    :deep(.el-table) {
      .el-table__header th,
      .el-table__body td {
        padding: 12px 8px;
        font-size: 13px;
      }
    }
  }
}

// 暗色主题特殊优化
.dark {
  .statistics-section {
    background: linear-gradient(135deg, var(--bg-color-overlay) 0%, rgba(var(--color-primary-rgb), 0.05) 100%);
    border-color: rgba(var(--color-primary-rgb), 0.2);
  }

  .filter-section {
    background: linear-gradient(135deg, var(--bg-color) 0%, var(--bg-color-overlay) 100%);
  }

  .table-section {
    :deep(.el-table) {
      .el-table__header th {
        background: linear-gradient(135deg, var(--bg-color-overlay) 0%, rgba(var(--color-primary-rgb), 0.05) 100%);
      }
    }
  }

  .review-content {
    background: linear-gradient(135deg, var(--bg-color-overlay) 0%, rgba(var(--color-primary-rgb), 0.02) 100%);
  }
}
</style>
